import { Button, Card, Col, Divider, Form, Input, Row, Select } from 'antd'
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getCategory } from '../../store/actions/category.action'
import { getProduct, searchProduct } from '../../store/actions/product.action'
import { AppState } from '../../store/reducers'
import { CategoryState } from '../../store/reducers/category.reducer'
import { ProductState } from '../../store/reducers/product.reducer'
import ProductItem from './ProductItem'

const Search = () => {
  const dispatch = useDispatch()
  const {search} =useSelector<AppState, ProductState>(state=>state.product)
  const {category} =useSelector<AppState, CategoryState>(state=>state.category)
  useEffect(()=>{
    dispatch(getCategory())
  },[])
  const result = {}
  const onFinish = (value:{category:string,search:string}) => {
    dispatch(searchProduct(value))
  }
  return (
    <div>
      <Form onFinish={onFinish} layout="horizontal" initialValues={{ category: 'All' }}>
        <Input.Group compact>
          <Form.Item name="category">
            <Select>
              <Select.Option value="All">
                所有分类
              </Select.Option>
              {
                category.result.map((item)=>(
                  <Select.Option key={item._id} value={item._id}>
                    {item.name}
                  </Select.Option>
                ))
              }
            </Select>
          </Form.Item>
          <Form.Item name="search">
            <Input placeholder="请输入关键词" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">搜索</Button>
          </Form.Item>
        </Input.Group>
      </Form>
      <Divider />
      <Row gutter={[16,16]}>
        {
          search.map(item=>(
          <Col span="6">
            <ProductItem product={item} />
          </Col>
          ))
        }
      </Row>
    </div>
  )
}
export default Search